import React, {Component} from 'react';
import NavigationBar from '../../Common/NavigationBar/NavigationBar.jsx'
import DialogNative from '../../Common/Dialog/Dialog.jsx';
import DialogHeader from '../../Common/Dialog/DialogHeader.jsx';
import DialogBody from '../../Common/Dialog/DialogBody.jsx';
import DialogFooter from '../../Common/Dialog/DialogFooter.jsx';
//import Using ES6 syntax
import WeUI from 'react-weui';
//import styles
import 'weui';
import 'react-weui/build/dist/react-weui.css';
import {CSS} from '../styles/meetingRoom.css';
import $ from 'jquery';
const {
    Cells,
    Cell,
    CellBody,
    CellFooter,
    Toptips,
    CellsTitle,
    Toast,
} = WeUI;
export default class MeetingRoomBuyTimeHistory  extends Component {
    constructor(props) {
        super(props);
        this.LeftClick = this.LeftClick.bind(this);
        this.state = {
            showToptips: false,
            showLoading: true,
            showToast: false,
            loadingTimer: null,
            toastTimer:null,
            warnTimer:null,
            topTipsMsg: "服务器错误！",
            data:[],
            showConfirmBuyTime:false,
            confirmBuyInfo:{},
        };
    }

    showWarn(error) {
        this.setState({showToptips: true,topTipsMsg:error, showLoading: false});
        this.state.warnTimer = setTimeout(() => {
            this.setState({showToptips: false});
        }, 2000);
    }

    componentWillMount() { //组件即将被插入
        this.getBuyHistory();
    }

    LeftClick() {

    }


    //获取充值记录
    getBuyHistory(){
        let self = this;
        fetch(getHost() + "/MeetingRoom/booking/history",{
            method: 'GET',
            credentials: 'include'
        }).then(response => response.json())
            .then(data => {
                if(data.success){
                    self.setState({
                        data:data.data,
                        showLoading:false
                    })
                }else{
                    self.showWarn(data.error.message);
                }
            }).catch(e => {
            self.showWarn(e.error.message);
        });

    }

    render() {
        let tempArea = [];
        if(this.state.data.length > 0){
            this.state.data.map((info, index) => {
                if(info.payStatusId === 2){//已支付
                    let item = <Cell>
                        <CellBody style={{height: "6.6rem"}}>
                            <div className="payHistory_box">
                                <div className="payHistory_title">充值时长:</div>
                                <div className="payHistory_timeLength_value">{info.timeLength}小时</div>
                                <div className="payHistory_price">¥{info.price}</div>
                            </div>
                            <div style={{clear:"both"}}/>
                            <div className="payHistory_time_box">
                                <div className="payHistory_time_title">充值时间:</div>
                                <div className="payHistory_time_value">{convertTimestampToStringWithDate(info.createTime)}</div>
                                <div className="payHistory_status status-done">已支付</div>
                            </div>
                        </CellBody>
                        <CellFooter/>
                    </Cell>;
                    tempArea.push(item);
                }
            });
        }

        return (
            <div>
                <NavigationBar Title="充值记录" LeftBar="true" LeftTitle="返回"
                               LeftIconSrc="/iot-meeting/assets/images/common/nav_back_icon.png" LeftClick={this.LeftClick}/>
                {tempArea.length > 0?
                    <div className="history_list_box">
                        <CellsTitle>加油包充值记录</CellsTitle>
                        <Cells style={{background: "white"}}>
                            {tempArea}
                        </Cells>
                    </div>
                    :
                    <div className="no_history_list">暂无记录</div>
                }
                <Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
                <Toptips type="warn" show={this.state.showToptips}>
                    {this.state.topTipsMsg}
                </Toptips>
                {/*<DialogNative show={this.state.showConfirmBuyTime} close={this.closeDialog.bind(this)}>*/}
                    {/*<DialogHeader>购买信息</DialogHeader>*/}
                    {/*<DialogBody>*/}
                        {/*<div className="DialogBody_time_box">*/}
                            {/*<div className="DialogBody_title">时长:</div>*/}
                            {/*<div className="DialogBody_value">{this.state.confirmBuyInfo.timeLength}小时</div>*/}
                        {/*</div>*/}
                        {/*<div className="DialogBody_price_box">*/}
                            {/*<div className="DialogBody_title">价格:</div>*/}
                            {/*<div className="DialogBody_value">{this.state.confirmBuyInfo.price}元</div>*/}
                        {/*</div>*/}
                        {/*<div style={{clear:"both"}}/>*/}
                        {/*<div className="DialogBody_price_box" style={{marginBottom:"0"}}>*/}
                            {/*<div className="DialogBody_title">支付费用:</div>*/}
                        {/*</div>*/}
                        {/*<div className="price_value_content">¥{price}</div>*/}
                        {/*<div className="DialogBody_btn_box">*/}
                            {/*<div className="cancel_btn_box"><div className="Cancel_btn" onClick={this.confirmCancel.bind(this,this.state.confirmBuyInfo.id)}>取消订单</div></div>*/}
                            {/*<div className="confirm_btn_box"><div className="confirm_btn" onClick={this.confirmBuyBtn.bind(this,this.state.confirmBuyInfo.id)}>确认购买</div></div>*/}
                            {/*<div style={{clear:"both"}}/>*/}
                        {/*</div>*/}
                    {/*</DialogBody>*/}
                    {/*<DialogFooter>*/}
                        {/*<div>1.企业购买加油包后，预定会议室可使用加油包抵扣;</div>*/}
                        {/*<div>2.加油包仅限公司当前所在园区可用;</div>*/}
                    {/*</DialogFooter>*/}
                {/*</DialogNative>*/}
            </div>
        )
    }
}